<template>
    <div class="proposal-page">
      <!-- 顶部搜索和筛选区 -->
      <div class="search-section">
        <el-input
          v-model="searchQuery"
          placeholder="搜索提案"
          class="search-input"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select v-model="selectedCategory" placeholder="选择分类">
          <el-option
            v-for="item in categories"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
  
        <el-button type="primary" @click="showNewProposalDialog">
          <el-icon><Plus /></el-icon>
          新建提案
        </el-button>
      </div>
  
      <!-- 提案列表区域 -->
      <div class="proposals-container">
        <div v-for="category in filteredProposals" :key="category.name" class="category-section">
          <h2 class="category-title">{{ category.name }}</h2>
          
          <div class="proposals-grid">
            <el-card 
              v-for="proposal in category.proposals" 
              :key="proposal.id" 
              class="proposal-card"
              shadow="hover"
            >
              <el-tag 
                class="proposal-status" 
                :type="getStatusType(proposal.status)"
              >
                {{ getStatusText(proposal.status) }}
              </el-tag>
              <h3 class="proposal-title" @click="showProposalDetail(proposal)">
                {{ proposal.title }}
              </h3>
              <p class="proposal-desc">{{ proposal.description }}</p>
              
              <div class="proposal-info">
                <span class="time">{{ proposal.createTime }}</span>
                <div class="vote-stats">
                  <span class="vote-stat">
                    赞成
                    {{ proposal.forCount || 0 }}
                  </span>
                  <span class="vote-stat">
                    反对
                    {{ proposal.againstCount || 0 }}
                  </span>
                </div>
              </div>
  
              <div class="vote-buttons">
                <el-popconfirm title="确定赞成?" @confirm="voteFor(proposal.id)">
                  <template #reference>
                    <el-button type="success" size="small">
                      <el-icon><Check /></el-icon>
                    </el-button>
                  </template>
                </el-popconfirm>
                <el-popconfirm title="确定反对?" @confirm="voteAgainst(proposal.id)">
                  <template #reference>
                    <el-button type="danger" size="small">
                      <el-icon><Close /></el-icon>
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </el-card>
          </div>
        </div>
      </div>
  
      <!-- 新建提案对话框 -->
      <el-dialog
        v-model="dialogVisible"
        title="新建提案"
        width="50%"
      >
        <el-form :model="newProposal" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="newProposal.title" />
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="newProposal.category">
              <el-option
                v-for="item in categories"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="newProposal.description"
              type="textarea"
              rows="4"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitProposal">
              提交
            </el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 提案详情对话框 -->
      <el-dialog
        v-model="detailDialogVisible"
        title="提案详情"
        width="50%"
      >
        <div v-if="currentProposal" class="proposal-detail">
          <div class="detail-header">
            <h2>{{ currentProposal.title }}</h2>
            <el-tag :type="getStatusType(currentProposal.status)">
              {{ getStatusText(currentProposal.status) }}
            </el-tag>
          </div>
          <div class="detail-info">
            <span>创建时间：{{ currentProposal.createTime }}</span>
            <span>分类：{{ getCategoryLabel(currentProposal.category) }}</span>
          </div>
          <div class="detail-description">
            {{ currentProposal.description }}
          </div>
          <div class="detail-votes">
            <div class="vote-count">
              <div>赞成票数：{{ currentProposal.forCount || 0 }}</div>
              <div>反对票数：{{ currentProposal.againstCount || 0 }}</div>
            </div>
            <div class="vote-actions">
              <el-button type="success" @click="voteFor(currentProposal.id)">赞成</el-button>
              <el-button type="danger" @click="voteAgainst(currentProposal.id)">反对</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import { Plus, Search, Check, Close } from '@element-plus/icons-vue'
  
  const searchQuery = ref('')
  const selectedCategory = ref('')
  const dialogVisible = ref(false)
  const detailDialogVisible = ref(false)
  const currentProposal = ref(null)
  
  // 提案分类
  const categories = [
    { label: '治理提案', value: 'governance' },
    { label: '技术提案', value: 'technical' },
    { label: '财务提案', value: 'financial' },
    { label: '社区提案', value: 'community' }
  ]
  
  // 模拟提案数据
  const proposalsList = ref([
    {
      name: '治理提案',
      proposals: [
        {
          id: 1,
          title: '提案标题1',
          description: '这是一个治理相关的提案描述...',
          status: 'active',
          createTime: '2023-10-01',
          voteCount: 156,
          category: 'governance',
          forCount: 0,
          againstCount: 0
        },
        // ... 更多提案
      ]
    },
    // ... 其他分类的提案
  ])
  
  // 新提案表单数据
  const newProposal = ref({
    title: '',
    category: '',
    description: ''
  })
  
  // 根据搜索条件过滤提案
  const filteredProposals = computed(() => {
    return proposalsList.value.map(category => ({
      ...category,
      proposals: category.proposals.filter(proposal => {
        const matchesSearch = proposal.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                            proposal.description.toLowerCase().includes(searchQuery.value.toLowerCase())
        const matchesCategory = !selectedCategory.value || proposal.category === selectedCategory.value
        return matchesSearch && matchesCategory
      })
    }))
  })
  
  // 获取状态文本
  const getStatusText = (status: string) => {
    const statusMap = {
      active: '进行中',
      closed: '已结束',
      pending: '待开始'
    }
    return statusMap[status] || status
  }
  
  // 显示新建提案对话框
  const showNewProposalDialog = () => {
    dialogVisible.value = true
  }
  
  // 提交新提案
  const submitProposal = () => {
    // 实现提交提案逻辑
    dialogVisible.value = false
  }
  
  // 添加投票方法
  const voteFor = (id: number) => {
    const proposal = proposalsList.value
      .flatMap(category => category.proposals)
      .find(p => p.id === id)
    if (proposal) {
      proposal.forCount = (proposal.forCount || 0) + 1
    }
  }
  
  const voteAgainst = (id: number) => {
    const proposal = proposalsList.value
      .flatMap(category => category.proposals)
      .find(p => p.id === id)
    if (proposal) {
      proposal.againstCount = (proposal.againstCount || 0) + 1
    }
  }
  
  // 显示提案详情的方法
  const showProposalDetail = (proposal) => {
    currentProposal.value = proposal
    detailDialogVisible.value = true
  }
  
  // 获取分类标签的方法
  const getCategoryLabel = (value) => {
    const category = categories.find(c => c.value === value)
    return category ? category.label : value
  }
  
  // 获取状态对应的 tag 类型
  const getStatusType = (status: string) => {
    const typeMap = {
      active: 'primary',   // 蓝色
      closed: 'info',      // 灰色
      pending: 'warning'   // 黄色
    }
    return typeMap[status] || 'info'
  }
  </script>
  
  <style scoped>
  .proposal-page {
    padding: 24px;
  }
  
  .search-section {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
  }
  
  .search-input {
    width: 300px;
  }
  
  .category-section {
    margin-bottom: 32px;
  }
  
  .category-title {
    margin-bottom: 16px;
    font-size: 20px;
    color: #2c3e50;
  }
  
  .proposals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .proposal-card {
    position: relative;
    transition: all 0.3s;
    padding: 0px;
    display: flex;
    flex-direction: column;
  }
  
  .proposal-status {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  
  .proposal-title {
    margin: 0 0 12px;
    font-size: 16px;
    padding-right: 80px;
    line-height: 1.5;
    cursor: pointer;
    &:hover {
      color: #409EFF;
    }
  }
  
  .proposal-desc {
    color: #666;
    margin-bottom: 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .proposal-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    margin-bottom: 16px;
  }
  
  .vote-stats {
    display: flex;
    gap: 12px;
  }
  
  .vote-stat {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .vote-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: auto;
  }
  
  .vote-buttons .el-button {
    padding: 6px 12px;
  }
  
  @media (max-width: 768px) {
    .search-section {
      flex-direction: column;
    }
    
    .search-input {
      width: 100%;
    }
    
    .proposals-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .proposal-detail {
    padding: 20px;
    
    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      h2 {
        margin: 0;
      }
    }
    
    .detail-info {
      display: flex;
      gap: 24px;
      color: #666;
      margin-bottom: 24px;
    }
    
    .detail-description {
      line-height: 1.6;
      color: #303133;
      margin-bottom: 24px;
    }
    
    .detail-votes {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .vote-count {
        color: #666;
      }
      
      .vote-actions {
        display: flex;
        gap: 12px;
      }
    }
  }
  </style>